<template>
  <div class="banner-manager">
    <filter-form
      :filterData="filterData"
      @search-filter="handleSearch"
    ></filter-form>
    <div
      style="
        width: 110%;
        height: 10px;
        background-color: rgb(239, 241, 245);
        margin: 0 -15px;
      "
    ></div>
    <el-button style="margin: 10px 0" type="primary" @click="add"
      >新增Banner</el-button
    >
    <table-form
      :pagination="pagination"
      :tableData="tableData"
      :tableHeader="tableHeader"
      @btn-click="handleBtn"
      @change-page="handlePage"
    ></table-form>
    <add-or-edit
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      :id="selectId"
      :dialogData="dialogData"
      @close-dialog="() => (dialogVisible = false)"
      @update-dialog="handleUpdate"
    ></add-or-edit>
  </div>
</template>

<script>
import TableForm from "@/components/table-form.vue";
import FilterForm from "@/components/filter-form.vue";
import AddOrEdit from "@/components/add-or-edit.vue";
import { requestApi } from "@/utils/request";

export default {
  name: "banner-manager",
  components: { TableForm, FilterForm, AddOrEdit },
  data() {
    return {
      dialogVisible: false,
      selectId: undefined,
      pagination: {
        current: 1,
        pageSize: 20,
        total: 0,
      },
      tableData: [],
      tableHeader: [
        {
          label: "轮播图url",
          type: "imgUrl",
        },
        {
          label: "跳转链接",
          type: "jumpLink",
        },
        {
          label: "排序值",
          type: "sortValue",
        },
        {
          label: "是否启用",
          type: "status",
        },
        {
          label: "标题",
          type: "title",
        },
        {
          label: "操作",
          type: "button",
        },
      ],
      filterData: [
        {
          label: "搜索昵称",
          name: "searchText",
          type: "input",
          value: "",
        },
      ],
      dialogData: [
        {
          label: "轮播图url",
          name: "imgUrl",
          require: true,
          type: "input",
          rule: { required: true, message: "请输入轮播图url", trigger: "blur" },
          value: "",
        },
        {
          label: "跳转链接",
          name: "jumpLink",
          type: "input",
          rule: { required: true, message: "请输入跳转链接", trigger: "blur" },

          value: "",
        },
        {
          label: "排序值",
          name: "sortValue",
          type: "input-number",
          rule: { required: true, message: "请输入排序值", trigger: "blur" },

          value: "",
        },

        {
          label: "是否启用",
          name: "status",
          type: "select",
          rule: {
            required: true,
            message: "请选择是否启用",
            trigger: "change",
          },

          value: "",
          options: [
            {
              value: false,
              label: "否",
            },
            {
              value: true,
              label: "是",
            },
          ],
        },
        {
          label: "标题",
          name: "title",
          type: "input",
          value: "",
          rule: {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
        },
      ],
    };
  },
  created() {
    this.fetchList(this.pagination);
  },
  methods: {
    add() {
      this.dialogData.forEach((item) => {
        item.value = "";
      });
      this.dialogVisible = true;
      this.selectId = undefined;
    },
    // 查询
    fetchList(params) {
      const data = { ...params };
      requestApi("/petHospital/banner/getPage", data, "post").then((res) => {
        this.pagination.total = res.data.total;
        this.tableData = res.data.list.map((item) => {
          return {
            id: item.id,
            imgUrl: item.imgUrl,
            jumpLink: item.jumpLink,
            sortValue: item.sortValue,
            status: item.status,
            title: item.title,
            button: [
              {
                label: "编辑",
                key: "edit",
              },
              {
                label: "删除",
                key: "delete",
              },
            ],
          };
        });
      });
    },
    // 翻页
    handlePage(val) {
      this.pagination.current = val;
      this.fetchList(this.pagination);
    },
    // 列表按钮操作
    handleBtn(key, val) {
      if (key === "delete") {
        requestApi(`/petHospital/banner/delete?id=${val.id}`, {}, "post").then(
          () => {
            this.$message.success("删除成功");
            this.fetchList(this.pagination);
          }
        );
      } else if (key === "edit") {
        this.dialogVisible = true;
        this.selectId = val.id;
        for (const i in val) {
          this.dialogData.forEach((item) => {
            if (item.name === i) {
              item.value = val[i];
            }
          });
        }
      }
    },
    // 查询
    handleSearch(val) {
      const data = {
        ...val,
        ...{
          pageSize: this.pagination.pageSize,
          current: this.pagination.current,
        },
      };
      this.fetchList(data);
    },
    // 弹窗新增修改
    handleUpdate(type, dataValue) {
      const data = { ...dataValue };
      if (type === "add") {
        requestApi("/petHospital/banner/addOrEditBanner", data, "post").then(
          () => {
            this.$message.success("新增成功");
            this.dialogVisible = false;
            this.fetchList(this.pagination);
          }
        );
      }
      if (type === "update") {
        data.id = this.selectId;
        requestApi("/petHospital/banner/addOrEditBanner", data, "post").then(
          () => {
            this.$message.success("更改成功");
            this.dialogVisible = false;
            this.fetchList(this.pagination);
          }
        );
      }
    },
  },
};
</script>
<style lang="less" scoped>
.banner-manager {
  padding: 15px;
  background-color: white;
}
</style>
